.pipeline-workflow__column_left {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-right: 5px;
  padding-right: 15px;

  .CodeMirror {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: calc(~'100% - 5px');
    line-height: 21px;
    border-color: #464e5c;
    border-radius: 3px;
    outline: none !important;
  }

  .btn-container {
    margin-top: 10px;
  }

  .white-box-with-shadow {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);

    .no-content {
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
      justify-content: center;
      height: 100%;

      img {
        width: 200px;
        height: 200px;
      }

      p {
        color: #606266;
        font-size: 15px;
      }
    }

    .white-box-with-shadow__content {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0;
      padding: 0 0 0 0;

      .cf-pipeline-yml-build__yaml-type {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;

        .service-name {
          span {
            font-size: 13px;
          }
        }

        .method-select {
          .el-button + .el-button {
            margin-left: 0;
          }
        }
      }

      .cf-pipeline-yml-build__wrapper {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
        margin-right: 0;
        margin-left: 0;
      }

      .cf-pipeline-yml-build__editor {
        display: flex;
        flex-direction: column;
        height: 100%;

        .cf-pipeline-yml-build__editor-wrapper {
          position: relative;
          flex: 1;
          min-height: 0;
          border: none !important;

          .from-code-container {
            margin-top: 50px;
          }

          .yaml-desc {
            position: absolute;
            z-index: 1;
            padding: 9px 34px;
            color: #ccc;
            font-size: 13px;
          }
        }

        .modal-block {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 999;
          padding: 14px;
          background: rgba(234, 234, 234, 0.92);
          cursor: not-allowed;
        }
      }
    }

    .yaml-errors__container {
      position: relative;
      margin-bottom: 0;
      overflow-y: hidden;
      background-color: #eb5848;

      .yaml-errors__errors-list {
        max-height: 180px;
        margin: 0;
        padding: 0 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        list-style: none;
        background-color: #eb5848;
        transition: max-height 200ms ease-out;

        &.yaml-infos__infos-list {
          background-color: #909399;
        }

        .yaml-errors__errors-list-item {
          display: flex;
          align-items: center;
          min-height: 35px;
          padding-left: 10px;
          color: #fff;
          font-size: 14px;
          background-color: #eb5848;
          border-bottom: 1px solid #ff7666;

          &.yaml-infos__infos-list-item {
            background-color: #909399;
          }

          .yaml-errors__errors-list-item-counter {
            margin-right: 20px;
            font-weight: bold;
          }

          .yaml-errors__errors-list-item-text {
            flex: 1;
            width: 300px;
            max-width: 100%;
            padding: 5px 0;
          }

          &:last-child {
            border-bottom: none;
          }
        }
      }
    }

    .controls__wrap {
      position: relative;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 55px;
      margin: 0 15px;
      background-color: #fff;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);

      > * {
        margin-right: 10px;
      }

      .controls__right {
        display: flex;
        align-items: center;

        .save-btn {
          margin-right: 15px;
          padding: 10px 17px;
          color: #fff;
          font-size: 13px;
          text-decoration: none;
          background-color: @themeColor;
          border: 1px solid @themeColor;
          cursor: pointer;
          transition: background-color 300ms, color 300ms, border 300ms;
        }

        .save-btn[disabled] {
          background-color: #9ac9f9;
          border: 1px solid #9ac9f9;
          cursor: not-allowed;
        }
      }
    }
  }

  &.pipeline-workflow__column--w100p {
    padding-right: 0;
  }
}
